<template>
	<view class="content">
		<!-- 顶部搜索栏 -->
		<view class="top">
			<view class="search">
				<!-- 搜索框 -->
				<view class="search_con">
					<u-search :showAction="true" placeholder="请输入标题" v-model="form.title" @search="handleSearch"
						@custom="handleSearch" actionText="搜索" :animation="true"></u-search>
				</view>
				<!-- 切换组件 -->
				<view class="search_switch">
					<view class="search_item" :class="{act_sItem:index==activeIndex}" @click="handleStatus(index)"
						v-for="(item,index) in ways" :key="index">{{item}}</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="bottom">
			<u-empty v-if="trends.length==0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"
				text="暂无数据">
			</u-empty>
			<view class="trends_item" @click="handleTrendsDetail(item.trendsId)" v-for="(item,index) in trends"
				:key="item.trendsId">
				<!-- 标题 -->
				<view class="t_title">{{item.title}}</view>
				<!-- 中间内容 -->
				<view class="t_center">
					<!-- 左边图片 -->
					<view class="t_img" :class="{t_img_no:!item.coverPhoto}">
						<image v-if="item.coverPhoto" class="img_con" :src="item.coverPhoto" mode=""></image>
						<text v-if="!item.coverPhoto">暂无图片</text>
					</view>
					<!-- 右边文章的一部分 -->
					<view class="t_text">
						{{item.content}}
					</view>
				</view>
				<!-- 底部信息 -->
				<view class="t_bottm">
					<!-- 阅览量 -->
					<text class="tip">阅览量：{{item.reads_count}}</text>
					<!-- 发布时间 -->
					<text class="tip">发布时间：{{getdateNoTime(item.createTime)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTrendsList
	} from '../../api/trends.js'
	export default {
		data() {
			return {
				activeIndex: 0,
				form: {},
				ways: [
					"全部",
					"今日动态"
				],
				trends: []
			};
		},
		onLoad() {
			this.handleGetTrendsList()
		},
		onShow() {
			this.handleGetTrendsList()
		},
		onPullDownRefresh() {
			this.handleGetTrendsList()
		},
		methods: {
			// 获取进入dateTime
			handleNowDateTime() {

				let nowTime = new Date()
				let year = nowTime.getFullYear()
				let month = nowTime.getMonth() + 1
				let date = nowTime.getDate()
				if (month < 10) {
					month = '0' + month
				}
				if (date < 10) {
					date = '0' + date
				}
				let str = year + '-' + month + '-' + date
				return str
			},
			// 跳转详情
			handleTrendsDetail(id) {
				uni.navigateTo({
					url: `/pages/trends_detail/trends_detail?id=${id}`
				})
			},
			// 处理发布时间
			getdateNoTime(date) {
				var now = new Date(parseInt(date)),
					y = now.getFullYear(),
					m = now.getMonth() + 1,
					d = now.getDate();
				let h = now.getHours()
				let min = now.getMinutes()
				let s = now.getSeconds()
				return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + " " + (h < 10 ? '0' + h : h) +
					":" + (min < 10 ? '0' + min : min) + ":" + (s < 10 ? '0' + s : s)
			},
			handleGetTrendsList() {
				getTrendsList(this.form).then(res => {
					this.trends = res.data.list
					let arr = [...this.trends]
					arr = arr.reverse()
					this.trends = [...arr]
					// console.log(this.trends);
					uni.stopPullDownRefresh()
				})
			},
			handleSearch() {
				this.handleGetTrendsList()
			},
			handleStatus(index) {
				this.activeIndex = index
				if (index == 0) {
					this.form.dateTime = ""
				} else if (index == 1) {
					let dateTime = this.handleNowDateTime()
					this.form.dateTime = dateTime

				}
				this.handleGetTrendsList()
			}
			// 
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;

		.top {
			width: 100%;

			.search {
				width: 100%;
				height: 185upx;
				// background-color: pink;
				overflow: hidden;
				box-shadow: 0 3upx 30upx rgba(0, 0, 0, .15);

				.search_con {
					box-sizing: border-box;
					width: 100%;
					padding: 0 20upx;
					margin-top: 30upx;
				}

				.search_switch {
					box-sizing: border-box;
					width: 100%;
					padding: 0 20upx;
					margin-top: 30upx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.search_item {
						width: 170upx;
						height: 50upx;
						// background-color: #fff;
						text-align: center;
						font-size: 30upx;
						line-height: 50upx;
						border-bottom: 10upx solid transparent;
						font-weight: 700;
					}

					.act_sItem {
						border-bottom: 2px solid #5064eb;
						color: #5064eb;
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 85vh;
			// background-color: pink;
			box-sizing: border-box;
			padding: 20upx;
			overflow-y: scroll;
			// 


			.trends_item {
				// 
				width: 100%;
				min-height: 280upx;
				background-color: #fff;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
				border-radius: 20upx;
				margin-bottom: 20upx;
				box-sizing: border-box;
				padding: 20upx;

				.t_title {
					font-size: 35upx;
					font-weight: 700;
				}

				.t_center {
					width: 100%;
					height: 125upx;
					// background-color: pink;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 20upx;

					.t_img {
						width: 200upx;
						height: 100%;
						background-color: #fff;
						margin-right: 10upx;
						border-radius: 15upx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						font-size: 24upx;
						color: #6d6d6d;



						.img_con {
							width: 100%;
							height: 100%;
							border-radius: 15upx;
						}
					}

					.t_img_no {
						border: 0.5upx dashed #6d6d6d;
					}

					.t_text {
						flex: 1;
						height: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						font-size: 30upx;
						color: #6d6d6d;
					}


				}
			}
		}

		.t_bottm {
			width: 100%;
			font-size: 25upx;
			color: #bcbcbc;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			margin-top: 18upx;

			.tip {
				margin-right: 30upx;

			}
		}
	}
</style>